
<template>
  <div class="home">
    <!-- 搜索 -->
    <router-link :to="`/search?isLogin=${isLogin}`"
      ><search></search
    ></router-link>

    <!-- 导航 -->
    <div class="nav">
      <ul>
        <!-- <li class="active">热门</li> -->
        <li>
          <router-link
            :to="`/homes/home/hot?isLogin=${isLogin}`"
            active-class="active"
            >热门</router-link
          >
        </li>
        <li>
          <router-link
            :to="`/homes/home/man?isLogin=${isLogin}`"
            active-class="active"
            >男生</router-link
          >
        </li>
        <li>
          <router-link
            :to="`/homes/home/lady?isLogin=${isLogin}`"
            active-class="active"
            >女生</router-link
          >
        </li>
      </ul>
    </div>
    <!-- 轮播图 -->
    <!-- <slideshow></slideshow> -->
    <!-- 漫画列表 -->
    <router-view></router-view>
    <!-- <cartoonList></cartoonList> -->
  </div>
</template>

<script>
import cartoonList from "../components/CartoonList.vue";
import search from "../components/Search.vue";

export default {
  name: "Home",
  components: {
    cartoonList,
    search,
  },
  data() {
    return {
      isLogin: this.$route.query.isLogin,
    };
  },
};
</script>

<style lang="scss">
@import "@/static/common/base.scss";

.home {
  background-color: $bgc;
}
// 导航
.nav {
  padding: $p;
  // padding-bottom: 2vw;
  // padding-top: 2vw;
  height: 12vw;

  ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 12vw;

    a {
      color: #fff;
      font-size: 4.2667vw;
    }
  }
  .active {
    font-size: 4.8vw;
    font-weight: 600;
  }
}
</style>